<template>
    <div class="MatchDetail">
      <div class="detailLeft">
      <div class="Content">
        <div class="ContentBox">
        <div class="ContentText">
          <div>赛事名称：XXX2018超级联赛</div>
        </div>
        <div class="ContentText">
          裁判长：张三</div>
        </div>
        <div  class="ContentBox">
          <div class="ContentText">
            <div>主办单位：武体xxx俱乐部</div>
          </div>
          <div class="ContentText">
            比赛地点：武汉市洪山区珞喻路武汉体育学院</div>
        </div>
        <div class="ContentBox">
          <div class="ContentText">
            <div>项目-组别：</div>
            <el-card class="box-card" style="margin-left: 20px;margin-top: 5px;">
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark">
              <el-table-column
                prop="team"
                label="项目-组别"
                width="120">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="medium">{{scope.row.team}}</el-button>
                </template>
              </el-table-column>
              <el-table-column
                prop="price"
                label="价格（元）"
                width="120"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                label="报名信息"
                width="120">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="medium">查看</el-button>
                </template>
              </el-table-column>
              <el-table-column
                label="查看抽签信息"
                width="120">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="medium">查看</el-button>
                </template>
              </el-table-column>
              <el-table-column
                label="查看成绩"
                width="120">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="medium">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            </el-card>
          </div>
        </div>
        <div  class="ContentBox">
          <div class="ContentText">
            <div>报名截止时间：2018-10-17 09:00</div>
          </div>
          <div class="ContentText">
            比赛开始时间：2018-10-18 09:00</div>
        </div>
        <div  class="ContentBox">
          <div class="ContentText">
            <div>报名必填信息：年龄 性别 身份证号码 项目类型 手机号码 省份</div>
          </div>
        </div>
        <div  class="ContentBox">
          <div class="ContentText">
            <div>本次比赛积分：</div>
            <el-card class="box-card">
            </el-card>
          </div>
        </div>
      </div>
      </div>
      <div class="detailright">
          <el-button type="primary" size="medium" class="Btn" @click="GoSignUp">签到</el-button>
          <el-button type="primary" size="medium" class="Btn">导出空白报名表</el-button>
          <el-button type="primary" size="medium" class="Btn">查看报名信息</el-button>
          <el-button type="primary" size="medium" class="Btn">排战表</el-button>
      </div>
    </div>
</template>

<script>
    export default {
        name: "MatchDetail",
        data(){
          return{
            tableData: [{
              id:'1',
              team:'青年组男单',
              price:'200',

            }, {
              id:'2',
              price:'100',
              team:'青年组男双',
            }, {
              id:'3',
              team:'青年组女单',
              price:'500'
            }, {
              id:'4',
              team:'青年组女双',
              price:'300'
            }]
          }
        },
      methods:{
        handleClick(row){
          console.log(row)
        },
        GoSignUp(){
          this.$router.push('/index/match/MatchSignUp')
        },
      },
    }
</script>

<style scoped>
.MatchDetail{
  width: 90%;
  margin-top: 50px;
  margin-left: 40px;
  display: flex;
}
.detailLeft{
  width: 80%;
}
.detailright{
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.Content{
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 16px;
  padding-bottom: 30px;
  flex-direction: column;
}
.ContentBox{
  display: flex;
  width: 100%;
  justify-content: space-around;
}
.ContentText{
  display: flex;
  flex: 1;
  margin-left: 10%;
  margin-bottom: 3%;
}
.Btn{
  width: 80%;
  margin-bottom: 20px;
}
</style>
